<template>
  <div id="box" class="font12" style="color: rgb(51, 51, 51);" :style="{height}">
    <ul id="con1" ref="con1" :class="{anim:animate==true}">
      <li v-for='item in items' class="text-oneLine">
        <span>{{item.phone}}投注{{item.paycoin}}</span>
        <span>{{item.inputtime}}</span>
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    props:{
      items:{
        type: Array,
        default: function () {
          return [];
        }
      },
      timeType:{
        type:String,
        default:'YY-MM-DD'
      },
      height:{
        default:'200px',
      },
      frequence:{
        default:1000
      }
    },
    data() {
      return {
        animate: false,
        timer:null
      }
    },
    created(){
      this.timer = setInterval(this.scroll, this.frequence)
    },
    beforeDestroy(){
      clearInterval(this.timer);
    },
    methods: {
      scroll(){
        this.animate = true;    // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
        setTimeout(()=> {      //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
          this.items.push(this.items[0]);  // 将数组的第一个元素添加到数组的
          this.items.shift();               //删除数组的第一个元素
          this.animate = false;  // margin-top 为0 的时候取消过渡动画，实现无缝滚动
        }, 500)
      }
    }
  }
</script>
<style>
  #box{
    width: 100%;
    overflow: hidden;
    padding:0 15px;
  }
  .anim{
    transition: all 0.5s;
    margin-top: -30px;
  }
  #con1 li{
    list-style: none;
    line-height: 30px;
    height: 30px;
  }
  .text-oneLine{
    display:block;
    word-break:keep-all;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
</style>
